<template>
  <div class="I-III-III">
    <table class="I-III-III__table">
      <tr class="I-III-III__table-trone">
        <td class="I-III-III__table-trone-td"
            colspan="7">
          <div class="I-III-III__table-trone-td-title">
            I-3-3 教学成果奖
          </div>
        </td>
      </tr>
      <tr class="I-III-III__table-trtwo">
        <td class="I-III-III__table-trtwo-td"
            colspan="8">
          <div class="I-III-III__table-trtwo-td-title">
            （一）国家级教学成果奖
            <span class="I-III-III__table-trtwo-td-title-tips">
              （科研院所不填写）
            </span>
          </div>
        </td>
      </tr>
      <tr class="I-III-III__table-th">
        <td class="I-III-III__table-th-tdone">
          序号
        </td>
        <td class="I-III-III__table-th-tdtwo">
          奖项名称
        </td>
        <td class="I-III-III__table-th-tdthree">
          获奖成果名称
        </td>
        <td class="I-III-III__table-th-tdfour">
          获奖<br>等级
        </td>
        <td class="I-III-III__table-th-tdfive">
          成果完<br>成人
        </td>
        <td class="I-III-III__table-th-tdsix">
          获奖<br>年度
        </td>
        <td class="I-III-III__table-th-tdseven">
          参与单<br>位情况
        </td>
        <td class="I-III-III__table-th-tdeight">
          参与学<br>科情况
        </td>
        <el-button type="success"
                   size="small"
                   icon="el-icon-plus"
                   class="I-III-III__table-th-add-button"
                   circle
                   @click.prevent="addCountryItem"/>
      </tr>
      <tr v-for="(item, index) in acc.countryInfos"
          :key="index + 'guo'"
          class="I-III-III__table-tr">
        <td class="I-III-III__table-tr-tdone">
          {{ index + 1 }}
        </td>
        <td class="I-III-III__table-tr-tdtwo">
          <el-input v-model="item.awardName"
                    type="textarea"
                    autosize
                    placeholder="填写奖项名称"
                    :maxlength="30"/>
        </td>
        <td class="I-III-III__table-tr-tdthree">
          <el-input v-model="item.achieveName"
                    type="textarea"
                    autosize
                    placeholder="填写成果名称"
                    :maxlength="30"/>
        </td>
        <td class="I-III-III__table-tr-tdfour">
          <el-input v-model="item.awardLevel"
                    type="textarea"
                    autosize
                    placeholder="一等"
                    :maxlength="10"/>
        </td>
        <td class="I-III-III__table-tr-tdfive">
          <el-input v-model="item.completer"
                    type="textarea"
                    autosize
                    placeholder="张三"
                    :maxlength="20"/>
        </td>
        <td class="I-III-III__table-tr-tdsix">
          <el-input v-model="item.awardYear"
                    type="textarea"
                    autosize
                    placeholder="2021"
                    :maxlength="4"/>
        </td>
        <td class="I-III-III__table-tr-tdseven">
          <el-input v-model="item.deptInfo"
                    type="textarea"
                    autosize
                    placeholder="1(1)"
                    :maxlength="5"/>
        </td>
        <td class="I-III-III__table-tr-tdeight">
          <el-input v-model="item.scienceInfo"
                    type="textarea"
                    autosize
                    placeholder="1(100%)"
                    :maxlength="15"/>
        </td>
        <el-button type="danger"
                   size="small"
                   icon="el-icon-delete"
                   class="I-III-III__table-tr-delete-button"
                   circle
                   @click.prevent="deleteGuojiaItem(index)"/>
      </tr>
      <tr class="I-III-III__table-trtwo">
        <td class="I-III-III__table-trtwo-td"
            colspan="7">
          <div class="I-III-III__table-trtwo-td-title">
            （二）其他代表性教学成果奖
            <span class="I-III-III__table-trtwo-td-title-tips">
              （限5项）
            </span>
          </div>
        </td>
      </tr>
      <tr class="I-III-III__table-th">
        <td class="I-III-III__table-th-tdone">
          序号
        </td>
        <td class="I-III-III__table-th-tdtwo">
          奖项名称
        </td>
        <td class="I-III-III__table-th-tdthree">
          获奖成果名称
        </td>
        <td class="I-III-III__table-th-tdfour">
          获奖<br>等级
        </td>
        <td class="I-III-III__table-th-tdfive">
          成果完<br>成人
        </td>
        <td class="I-III-III__table-th-tdsix">
          获奖<br>年度
        </td>
        <td class="I-III-III__table-th-tdseven">
          参与单<br>位情况
        </td>
        <td class="I-III-III__table-th-tdeight">
          参与学<br>科情况
        </td>
        <el-button type="success"
                   size="small"
                   icon="el-icon-plus"
                   class="I-III-III__table-th-add-button"
                   circle
                   @click.prevent="addOtherItem"/>
      </tr>
      <tr v-for="(item, index) in acc.otherInfos"
          :key="index + 'other'"
          class="I-III-III__table-tr">
        <td class="I-III-III__table-tr-tdone">
          {{ index + 1 }}
        </td>
        <td class="I-III-III__table-tr-tdtwo">
          <el-input v-model="item.awardName"
                    type="textarea"
                    autosize
                    placeholder="填写奖项名称"
                    :maxlength="100"/>
        </td>
        <td class="I-III-III__table-tr-tdthree">
          <el-input v-model="item.achieveName"
                    type="textarea"
                    autosize
                    placeholder="填写成果名称"
                    :maxlength="100"/>
        </td>
        <td class="I-III-III__table-tr-tdfour">
          <el-input v-model="item.awardLevel"
                    type="textarea"
                    autosize
                    placeholder="一等"
                    :maxlength="10"/>
        </td>
        <td class="I-III-III__table-tr-tdfive">
          <el-input v-model="item.completer"
                    type="textarea"
                    autosize
                    placeholder="张三"
                    :maxlength="100"/>
        </td>
        <td class="I-III-III__table-tr-tdsix">
          <el-input v-model="item.awardYear"
                    type="textarea"
                    autosize
                    placeholder="2021"
                    :maxlength="4"/>
        </td>
        <td class="I-III-III__table-tr-tdseven">
          <el-input v-model="item.deptInfo"
                    type="textarea"
                    autosize
                    placeholder="1(1)"
                    :maxlength="5"/>
        </td>
        <td class="I-III-III__table-tr-tdeight">
          <el-input v-model="item.scienceInfo"
                    type="textarea"
                    autosize
                    placeholder="1(100%)"
                    :maxlength="15"/>
        </td>
        <el-button type="danger"
                   size="small"
                   icon="el-icon-delete"
                   class="I-III-III__table-tr-delete-button"
                   circle
                   @click.prevent="deleteOtherItem(index)"/>
      </tr>
    </table>
    <div class="I-III-III__explain">
      <span class="I-III-III__explain-strong">
        说明：①
      </span>
      表（一）限填评估期内获得的“国家级教学成果奖（高等教育类）、中国学位与研究生教育学会研究生教育成果奖”，文件中列出的各“获奖单位”均可填写。
      <span class="I-III-III__explain-strong">
        ②
      </span>
      表（二）填写其他5项代表性教学成果奖（如军队教学成果奖、省级教学成果奖等）。
      <span class="I-III-III__explain-strong">
        ③
      </span>
      “获奖年度”应与获奖证书名称或内容的年度表述一致，若无明确的年度表述以证书编号中的年度信息为准，其他以证书落款年度为准。
    </div>
  </div>
</template>

<script>
import { getPageData } from '@/utils/getData.js'

export default {
  watch: {
    acc: {
      handler (newVal) {
        sessionStorage['this_data'] = JSON.stringify(newVal)
      },
      deep: true,
      immediate: true
    }
  },
  async mounted () {
    const loading = this.$loading({ lock: true, text: '数据获取中...请稍后！', background: 'rgba(0, 0, 0, 0.7)' })
    this.acc = await getPageData('acc')
    loading.close()
  },
  data () {
    return {
      acc: {
        countryInfos: [],
        otherInfos: []
      }
    }
  },
  methods: {
    addCountryItem () {
      this.acc.countryInfos.push({ awardName: '', type: '', author: '', position: '', awardLevel: '', language: '' })
    },
    deleteGuojiaItem (index) {
      this.acc.countryInfos.splice(index, 1)
    },
    addOtherItem () {
      this.acc.otherInfos.push({ awardName: '', type: '', author: '', position: '', awardLevel: '', language: '' })
    },
    deleteOtherItem (index) {
      this.acc.otherInfos.splice(index, 1)
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../assets/css/page/1-3-3.less';
</style>
